<template lang="pug">
  Modal.lzw-modal-style-2(v-model="createModal" title="收费方案" fullscreen)
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120")
      Row(type="flex" justify="start" :gutter="16")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案类型：" prop="chargingType"  :label-width="130")
            Select.input-has-border(v-model="formValidate.chargingType"  placeholder="请选择收费类型"  @on-change="typeChange")
              Option(v-for="(item, index) in chargingTypeArr" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案名称：" prop="name"  :label-width="130")
            Input.input-has-border(v-model="formValidate.name" clearable)
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" v-if="isFuwufei")
          FormItem.ivu-form-item-required(label="是否跟随保险收费：" :label-width="150")
            i-switch(v-model="formValidate.hasInsure")
              span(slot="open") 是
              span(slot="close") 否
      Divider.mt-0
      div.pos-r
        RadioGroup(v-model="charge" style="display:block" @on-change="chargeChange")
          Radio.card.mb-15(v-if="isSb" label="1") 当月新增当月收费
          Radio.card.mb-15(v-if="isXinzi" label="5") 当月新增次月收费
          Radio.card.mb-15(v-if="isSb" label="6")
            | 预收：
            Input.input-has-border(v-model="advanceMonths" type="number" style="width:100px")
            | 个月
            .early-collection.ml-30 是否提前收取：
              i-switch(v-model="earlyCollection")
                span(slot="open") 是
                span(slot="close") 否
          Radio.card.mb-15(v-if="isShuifei" label="4")
            | 按金额比例收费
            .ratio-item(v-for="(item, index) in taxRateArr" :key="index")
              span {{taxTextArr[index]}}：
              Input.input-has-border(v-model="item.rate" type="number" style="width:100px")
              | %

      .card.mb-15(v-if="isFuwufei")
        .d-f-c
          Checkbox(v-model="fuwufeiModel1") 服务费收费方式：
          Select.input-has-border(v-model="fuwufeiData.type"  placeholder="请选择" clearable style="width:200px")
            Option(v-for="(item, index) in fuwufeiArr" :value="item.key" :key="index") {{ item.value }}
        .container.ml-30
          .pos-r.input-h24.mt-20(v-if="fuwufeiData.type === '1'")
            Input.input-has-border(type="number" style="width:100px")
            |  元/年，费用开始月：
            Select.input-has-border(v-model="monthValue"  placeholder="请选择" clearable style="width:100px")
              Option(v-for="(item, index) in monthArr" :value="item.key" :key="index") {{ item.value }}
            .early-collection.ml-15 是否提前收取：
              i-switch(v-model="earlyCollection")
                span(slot="open") 是
                span(slot="close") 否
          .pos-r.mt-20(v-if="fuwufeiData.type === '2'")
            .has-line
              span 温馨提示：服务费=岗位工资-社保单位部分-公积金单位部分-应发工资-商保
          .pos-r.mt-20(v-if="fuwufeiData.type === '3'")
            .has-line
              span 温馨提示：范围与范围之间，需有连贯性
              Button.ml-20(type="info" size="small" @click="addScopeFn") 添加范围
            .scope
              .li.input-h24.mt-10(v-for="(item, index) in scopeArr" :key="index")
                Input.input-has-border(v-model="item.start" type="number" style="width:100px")
                |  -- 
                Input.input-has-border(v-model="item.end" type="number" style="width:100px")
                |  人，
                Input.input-has-border(v-model="item.price" type="number" style="width:100px")
                |  元/人/月
                span.u-d-info.ml-20(v-show="index === scopeArr.length-1" @click="delScopeFn") 删除
          .pos-r.mt-20(v-if="fuwufeiData.type === '4'")
            CheckboxGroup(v-model="capitationValue")
              template(v-for="(item,index) in capitationArr")
                Divider.mt-5.mb-0
                Checkbox.d-f-c.mt-10(:label="item.type")
                  .ml-10
                    .capitation-li.mb-10
                      span {{item.name}}：
                      Input.input-has-border(v-model="item.price" type="number" style="width:100px;")
                      span  元/人/月，
                    .capitation-li
                      span 收费规则：
                      RadioGroup(v-model="item.rule")
                        Radio(label="1" border) 当月新增当月收费
                        Radio(label="2" border) 当月新增次月收费
                        Radio(label="3" border)
                          span 预收：
                          Input.input-has-border(v-model="item.month" style="width:100px")
                          span 个月（
                          .early-collection 是否提前收取：
                            i-switch(v-model="item.earlyCollection")
                              span(slot="open") 是
                              span(slot="close") 否
                          span ）
              Divider.mt-5.mb-0
              Checkbox.d-f-c.mt-10(label="收头不收尾")
                .ml-10 收头不收尾
          .pos-r.mt-20(v-if="fuwufeiData.type === '5'")
            Table(border :columns="thead" :data="combinationsArr" @on-selection-change="tableChange")
              .input-h24(slot-scope="{ row, index }" slot="price")
                Input.input-has-border(v-model="row.price" type="number" @on-change="tablePriceChange(row, index)")
              .input-h24(slot-scope="{ row, index }" slot="rule")
                RadioGroup(v-model="row.rule" @on-change="tableRadioChange(row,index)")
                  Radio(label="1" border) 当月新增当月收费
                  Radio(label="2" border) 当月新增次月收费
                  Radio(label="3" border)
                    span 预收：
                    Input.input-has-border(v-model="row.month" style="width:100px" @on-change="tableMonthChange(row,index)")
                    span 个月（
                    .early-collection 是否提前收取：
                      i-switch(v-model="row.earlyCollection" @on-change="tableSwitchChange(row,index)")
                        span(slot="open") 是
                        span(slot="close") 否
                    span ）
          .pos-r.mt-20(v-if="fuwufeiData.type === '6'")
            .input-h24.mt-15(v-for="(item, index) in paymentBaseArr" :key="index")
              span {{item.name}}：
              Input.input-has-border(v-model="item.proportion" type="number" style="width:100px")
              span %
      .card.mb-15(v-if="isFuwufei")
        Checkbox(v-model="fuwufeiModel2") 按金额比例收费
        .container.ml-30
          .input-h24.mt-15(v-for="(item, index) in amountArr" :key="index")
            span {{item.name}}：
            Input.input-has-border(v-model="item.proportion" type="number" style="width:100px")
            span %
          RadioGroup.mt-20(v-model="calOrder")
            Radio(label="1").mr-30 先计算税费
            Radio(label="2") 先计算服务费

    .text-center(slot="footer")
      Button(@click="createModal = false") 取消
      Button(type="info" @click="handleSubmit('formValidate')") 保存
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'

export default {
  props: {
  },
  data () {
    return {
      monthArr: [
        {key: '1', value: '1月'},
        {key: '2', value: '2月'},
        {key: '3', value: '3月'},
        {key: '4', value: '4月'},
        {key: '5', value: '5月'},
        {key: '6', value: '6月'},
        {key: '7', value: '7月'},
        {key: '8', value: '8月'},
        {key: '9', value: '9月'},
        {key: '10', value: '10月'},
        {key: '11', value: '11月'},
        {key: '12', value: '12月'},
      ],
      monthValue: '',
      createModal: false,
      chargingTypeArr: [
        {key: '1', value: '社保收费方案'},
        {key: '2', value: '公积金收费方案'},
        {key: '4', value: '商保收费方案'},
        {key: '8', value: '薪资收费方案'},
        {key: '16', value: '服务费收费方案'},
        {key: '32', value: '税费收费方案'}
      ],

      // 社保，公积金，商保，薪资部分
      type_1: ['1', '2', '4', '8'],
      earlyCollection: true, // 是否提前收取
      advanceMonths: 0, // 预收月份
      charge: '1', // 收费方式


      // 公共部分
      formValidate: {
        name: '',
        chargingType: '1', // 收费方案类型
        hasInsure: false
      },

      // 服务费方案的数据
      fuwufeiModel1: true,
      fuwufeiModel2: false,
      fuwufeiData: {  // 服务费明细
        type: '1',
        detail: ''
      },
      // 服务费收费方式1
      fuwufeiArr: [
        {key: '1', value: '年度总包收费'},
        {key: '2', value: '按岗位工资收费'},
        {key: '3', value: '按人员数量收费'},
        {key: '4', value: '按人头收费'},
        {key: '5', value: '组合项目收费'},
        {key: '6', value: '按缴费基数收费'}
      ],
      //按人员数量收费
      scopeIndex: 0,
      scopeArr: [
        {start: 0, end: 0, price: 0}
      ],

      // 服务费按人头收费
      capitationValue: [],
      capitationArr: [
        {type: '1', name: '基础服务费', price: 0, rule: '', month: '', earlyCollection: true},
        {type: '2', name: '社保服务费', price: 0, rule: '', month: '', earlyCollection: true},
        {type: '3', name: '公积金服务费', price: 0, rule: '', month: '', earlyCollection: true},
        {type: '4', name: '商保服务费', price: 0, rule: '', month: '', earlyCollection: true},
        {type: '5', name: '薪资服务费', price: 0, rule: '', month: '', earlyCollection: true}
      ],
      
      // 服务费按组合项目收费
      thead: [
        // {type: 'selection', width: 60, fixed: 'left'},
        {title: '组合方式', key: 'name', width: 200},
        {title: '服务费金额(元/人/月)', slot: 'price', width: 120},
        {title: '收费规则', slot: 'rule', width: 800}
      ],
      combinationsArr: [
        {name:'社保', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'公积金', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'商保', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+公积金', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+商保', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'公积金+商保', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'公积金+薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'商保+薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+公积金+商保', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+公积金+薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+商保+薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'公积金+商保+薪资', price: 0, rule: '', month: '', earlyCollection: true},
        {name:'社保+公积金+商保+薪资', price: 0, rule: '', month: '', earlyCollection: true},
      ],

      // 按缴费基数收费
      paymentBaseArr: [
        {name: '社保', proportion: 0},
        {name: '公积金', proportion: 0}
      ],

      // 按金额比例收费
      amountArr: [
        {name: '社保', proportion: 0},
        {name: '公积金', proportion: 0},
        {name: '商保', proportion: 0},
        {name: '薪资', proportion: 0},
        {name: '税费', proportion: 0}
      ],
      // 先计算税费还是服务费
      calOrder: '',
      // 税费方案
      taxTextArr:['社保', '公积金', '商保', '薪资', '服务费'],
      taxRateArr: [
        {category: '1', rate: 0}, 
        {category: '2', rate: 0}, 
        {category: '4', rate: 0}, 
        {category: '8', rate: 0}, 
        {category: '16', rate: 0}
      ],
      
      // 验证
      ruleValidate: {
        chargingType: [
          { required: true, message: '类型不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入方案名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  computed: {
    isSb () {
      const type = ['1', '2', '4', '8']
      return type.includes(this.formValidate.chargingType)
    },
    isXinzi () {
      const type = ['1', '2', '4']
      return type.includes(this.formValidate.chargingType)
    },
    isShuifei () {
      const type = ['32']
      return type.includes(this.formValidate.chargingType)
    },
    isFuwufei () {
      const type = ['16']
      if (type.includes(this.formValidate.chargingType)) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    modalShow () {
      this.createModal = true
    },
    typeChange (val) {
      this.formValidate.name = ''
      if (this.type_1.includes(val)) {
        this.earlyCollection = true // 是否提前收取
        this.advanceMonths = 0 // 预收月份
        this.charge = '1' // 收费方式
      }
      // switch (val) {
      //   case '1':
      //     this.postInsureProject()
      //     break;
      //   case '2':
      //     this.postInsureProject()
      //     break;
      //   case '4':
      //     this.postInsureProject()
      //     break;
      //   case '8':
      //     this.postInsureProject()
      //     break;
      //   case '16':
      //     console.log('16')
      //     break;
      //   case '32':
      //     console.log('32')
      //     break;
      // }
    },
    chargeChange (val) {
      console.log(val)
    },
    // 服务费添加范围
    addScopeFn () {
      let strat = parseInt(this.scopeArr[this.scopeIndex].end) + 1
      this.scopeArr.push({start: strat, end: '', price: ''})
      this.scopeIndex++
    },
    delScopeFn () {
      if (this.scopeIndex == 0) {
        return false
      } else {
        this.scopeIndex--
        this.scopeArr.pop()
      }
    },
    tableChange (val) {
      console.log(val)
    },
    tablePriceChange (row,index) {
      console.log(row,index)
      this.combinationsArr[index].price = row.price
    },
    tableRadioChange (row, index) {
      this.combinationsArr[index].rule = row.rule
    },
    tableMonthChange (row, index) {
      this.combinationsArr[index].month = row.month
    },
    tableSwitchChange (row,index) {
      this.combinationsArr[index].earlyCollection = row.earlyCollection
    },
    // 保存按钮
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          switch (this.formValidate.chargingType) {
            case '1':
              this.postInsureProject()
              break;
            case '2':
              this.postInsureProject()
              break;
            case '4':
              this.postInsureProject()
              break;
            case '8':
              this.postInsureProject()
              break;
            case '16':
              console.log('16')
              break;
            case '32':
              console.log('32')
              this.postTaxProject()
              break;
          }
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    // 社保，公积金，商保，薪资部分提交
    postInsureProject () {
      InsureProjectApi.PostInsureProject({
        Category: this.formValidate.chargingType,
        Name: this.formValidate.name,
        Charge: this.charge,
        AdvanceMonths: this.advanceMonths,
        IsAhead: this.earlyCollection
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.createModal = false
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 税费方案提交
    postTaxProject () {
      InsureProjectApi.PostTaxProject({
        Name: this.formValidate.name,
        Details: this.taxRateArr
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.createModal = false
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 服务费收费方案
  }
}
</script>
<style lang="less">
  .capitation-li {
    display: inline-block;
    .ivu-input-wrapper{
      vertical-align: baseline;
    }
    .ivu-input{
      height: 24px;
    }
  }
  .input-h24{
    .ivu-select .ivu-select-selection{
      height: 24px;
      .ivu-select-placeholder{
        height: 24px;
        line-height: 24px;
      }
      .ivu-select-selected-value{
        line-height: 24px;
      }
    }
    .ivu-input-wrapper{
      vertical-align: baseline;
    }
    .ivu-input{
      height: 24px;
    }
  }
  
</style>

<style lang="less" scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>
